<template>
  <div class>
    <el-dialog
      :close-on-click-modal="false"
      title="打印模板"
      :visible.sync="dialogVisibleAAA"
      width="286px"
      :before-close="handleClose"
    >
      <div class="">
        <!-- <el-tabs type="border-card">
                  <el-tab-pane label="空白面单">
                    <div class="facesheet_all">
                        <div class="facesheet_top">
                          <div class="facesheet_t_l">
                            <div class="logo_img"><img :src="logo" /></div>
                            <div class="logo_title"><img :src="titleImg" /></div>
                            <div class="logo_content">
                              <h2>医药冷链物流运输单</h2>
                              <span>全国统一客服热线：XXX-XXX-XXXX</span>
                              <span>中国唯一官方网站：www.XXXX.com</span>
                            </div>
                          </div>
                          <div class="facesheet_t_r"><img :src="tiaomaImg" /></div>
                        </div>
                        <div class="facesheet_mid">
                          <div class="facesheet_mid_l">
                            <div class="facesheet_mid_l_o">
                              <div class="mid_title">①寄件信息Sender Imformation</div>
                              <div class="mid_list">
                                <span>公司名称 Company：111111</span>
                                <span>寄件人 Sender：</span>
                                <span>地址 Address：</span>
                                <span>联系电话 Phone：</span>
                              </div>
                            </div>
                            <div class="facesheet_mid_l_t">
                              <div class="mid_title">②收件信息Receiver Imformation</div>
                              <div class="mid_list">
                                <span>公司名称 Company：</span>
                                <span>收件人 Reciver：</span>
                                <span>地址 Address：</span>
                                <span>联系电话 Phone：</span>
                              </div>
                            </div>
                            <div class="facesheet_mid_l_o">
                              <div class="mid_title">③托运货物信息Freight Consignment Information</div>
                              <div class="mid_list">
                                <span>货物品名 Commodity：</span>
                                <span>件数 Amount：</span>
                              </div>
                            </div>
                            <div class="facesheet_mid_l_t">
                              <div class="mid_title">④重要说明Remark</div>
                              <div class="mid_list mid_list_desc">
                              </div>
                            </div>
                          </div>
                          <div class="facesheet_mid_r">
                            <div class="bottom_title">⑧产品/服务Product Service</div>
                            <div class="mid_r_content">
                              <div><span>冷链服务Cold-Chain Service:</span><span>111</span></div>
                              <div><span>冷冻服务Freezing Service：</span><span><el-checkbox label="-25℃~-20℃" name="type"></el-checkbox><el-checkbox label="-80℃~-60℃" name="type"></el-checkbox><el-checkbox label="干冰Dry Ice" name="type"></el-checkbox></span></div>
                              <div><span>冷藏服务Refrigeration Service：</span><span><el-checkbox label="2℃~8℃" name="type"></el-checkbox></span></div>
                              <div><span>阴凉服务Shade Service：</span><span><el-checkbox label="15℃~25℃" name="type"></el-checkbox></span></div>
                              <div><span>时限服务Time Service:</span><span><el-checkbox label="6~12H" name="type"></el-checkbox><el-checkbox label="24~48H" name="type"></el-checkbox><el-checkbox label="48~72H" name="type"></el-checkbox></span></div>
                              <div><span style="display:block;clear: both;">温度记录Temperature Records:</span><span style="display:block;clear:both;"><span style="display:block;float:left"><el-checkbox label="是" name="type"></el-checkbox><el-checkbox label="否" name="type"></el-checkbox></span><span style="display:block;float:left">渡石温度计编码<i style="display:block;">Yunhu Thermometer Code ：</i></span><b style="display:block; float:right">__________________</b></span></div>
                              <div><span><i>温控箱规格</i><u> Of Temperature Control Box：</u></span><span><el-checkbox label="DS12L" name="type"></el-checkbox><el-checkbox label="DS36L" name="type"></el-checkbox><el-checkbox label="DS60L" name="type"></el-checkbox><el-checkbox label="其他Other" name="type"></el-checkbox>_________L</span></div>
                            </div>
                          </div>
                        </div>
                        <div class="facesheet_bottom">
                          <div class="facesheet_bottom_ll">
                            <div class="facesheet_bottom_l">
                              <div class="bottom_title">⑤交寄信息Delivery Information</div>
                              <div class="bottom_content">
                                <span><i>寄件人签名</i><u>Sender's Signature ：</u></span>
                                <span><i>日期Date ：</i><b>年</b><b>月</b><b>日</b><b>时</b></span>
                              </div>
                            </div>
                            <div class="facesheet_bottom_m">
                              <div class="bottom_title">⑥接收信息Receive Information</div>
                              <div class="bottom_content">
                                <span><i>收件人签名</i><u>Receiver's Signature：</u></span>
                                <span><i>日期Date ：</i><b>年</b><b>月</b><b>日</b><b>时</b></span>
                              </div>
                            </div>
                            <div class="facesheet_bottom_r">
                              <div class="bottom_title">⑦保险Insurance</div>
                              <div class="bottom_value">
                                  <div class="value_span">
                                    <span><font><i>声明价值</i><b>Declared Value：</b></font><u>________元RMB</u></span>
                                    <span>保价Insured：<u>________元RMB</u></span>
                                    <span>费用Charges：<u>________元RMB</u></span>
                                  </div>
                                  <div class="value_img"><img :src="smaImg"/></div>
                              </div>
                            </div>
                          </div>
                          <div class="facesheet_bottom_rr">
                            <div class="bottom_title">⑨付款方式/总费用Payment/TotalCharges</div>
                            <div class="mid_r_content">
                              <div><span style="padding-left:10px;"><el-checkbox label="现结 Sender Pay Cash：" name="type"></el-checkbox></span><span style="color:#fff;font-size:12px;">_______________元RMB</span></div>
                              <div><span style="display:block;padding-left:10px;"><el-checkbox label="寄件/收件人月结 Sender/Receiver Pay Monthly：" name="type"></el-checkbox></span><span style="color:#fff;font-size:12px;display:block;padding-left: 26px;">_______________元RMB</span></div>
                              <div><span style="padding-left:10px;"><el-checkbox label="第三方月结 3rd Party Pay Monthly：" name="type"></el-checkbox></span><span style="color:#fff;font-size:12px;">_______________元RMB</span></div>
                              <div><span style="color:#fff;font-size:12px;padding-left:10px;">月结账号Monthly Closing Account：</span><span style="color:#fff;font-size:12px;display:block;padding-left:10px;">_____________________________________________________</span></div>
                              <div style="margin-top:8px;"><span style="color:#fff;font-size:12px;padding-left:10px;">总费用Total Charges: </span><span style="color:#fff;font-size:12px;">_____________________________元RMB</span></div>
                            </div>
                          </div>
                        </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="内容面单">
                    <div class="facesheet_all">
                        <div class="facesheet_top">
                          <div class="facesheet_t_l">
                            <div class="logo_img"><img :src="logo" /></div>
                            <div class="logo_title"><img :src="titleImg" /></div>
                            <div class="logo_content">
                              <h2>医药冷链物流运输单</h2>
                              <span>全国统一客服热线：XXX-XXX-XXXX</span>
                              <span>中国唯一官方网站：www.XXXX.com</span>
                            </div>
                          </div>
                          <div class="facesheet_t_r"><img :src="tiaomaImg" /></div>
                        </div>
                        <div class="facesheet_mid">
                          <div class="facesheet_mid_l">
                            <div class="facesheet_mid_l_o">
                              <div class="mid_title">①寄件信息Sender Imformation</div>
                              <div class="mid_list">
                                <span>公司名称 Company：22222</span>
                                <span>寄件人 Sender：</span>
                                <span>地址 Address：</span>
                                <span>联系电话 Phone：</span>
                              </div>
                            </div>
                            <div class="facesheet_mid_l_t">
                              <div class="mid_title">②收件信息Receiver Imformation</div>
                              <div class="mid_list">
                                <span>公司名称 Company：</span>
                                <span>收件人 Reciver：</span>
                                <span>地址 Address：</span>
                                <span>联系电话 Phone：</span>
                              </div>
                            </div>
                            <div class="facesheet_mid_l_o">
                              <div class="mid_title">③托运货物信息Freight Consignment Information</div>
                              <div class="mid_list">
                                <span>货物品名 Commodity</span>
                                <span>件数 Amount</span>
                              </div>
                            </div>
                            <div class="facesheet_mid_l_t">
                              <div class="mid_title">④重要说明Remark</div>
                              <div class="mid_list mid_list_desc">
                              </div>
                            </div>
                          </div>
                          <div class="facesheet_mid_r">
                            <div class="bottom_title">⑧产品/服务Product Service</div>
                            <div class="mid_r_content">
                              <div><span>冷链服务Cold-Chain Service:</span><span>111</span></div>
                              <div><span>冷冻服务Freezing Service：</span><span><el-checkbox label="-25℃~-20℃" name="type"></el-checkbox><el-checkbox label="-80℃~-60℃" name="type"></el-checkbox><el-checkbox label="干冰Dry Ice" name="type"></el-checkbox></span></div>
                              <div><span>冷藏服务Refrigeration Service：</span><span><el-checkbox label="2℃~8℃" name="type"></el-checkbox></span></div>
                              <div><span>阴凉服务Shade Service：</span><span><el-checkbox label="15℃~25℃" name="type"></el-checkbox></span></div>
                              <div><span>时限服务Time Service:</span><span><el-checkbox label="6~12H" name="type"></el-checkbox><el-checkbox label="24~48H" name="type"></el-checkbox><el-checkbox label="48~72H" name="type"></el-checkbox></span></div>
                              <div><span style="display:block;clear: both;">温度记录Temperature Records:</span><span style="display:block;clear:both;"><span style="display:block;float:left"><el-checkbox label="是" name="type"></el-checkbox><el-checkbox label="否" name="type"></el-checkbox></span><span style="display:block;float:left">渡石温度计编码<i style="display:block;">Yunhu Thermometer Code ：</i></span><b style="display:block; float:right">__________________</b></span></div>
                              <div><span><i>温控箱规格</i><u> Of Temperature Control Box：</u></span><span><el-checkbox label="DS12L" name="type"></el-checkbox><el-checkbox label="DS36L" name="type"></el-checkbox><el-checkbox label="DS60L" name="type"></el-checkbox><el-checkbox label="其他Other" name="type"></el-checkbox>_________L</span></div>
                            </div>
                          </div>
                        </div>
                        <div class="facesheet_bottom">
                          <div class="facesheet_bottom_ll">
                            <div class="facesheet_bottom_l">
                              <div class="bottom_title">⑤交寄信息Delivery Information</div>
                              <div class="bottom_content">
                                <span><i>寄件人签名</i><u>Sender's Signature ：</u></span>
                                <span><i>日期Date ：</i><b>年</b><b>月</b><b>日</b><b>时</b></span>
                              </div>
                            </div>
                            <div class="facesheet_bottom_m">
                              <div class="bottom_title">⑥接收信息Receive Information</div>
                              <div class="bottom_content">
                                <span><i>收件人签名</i><u>Receiver's Signature：</u></span>
                                <span><i>日期Date ：</i><b>年</b><b>月</b><b>日</b><b>时</b></span>
                              </div>
                            </div>
                            <div class="facesheet_bottom_r">
                              <div class="bottom_title">⑦保险Insurance</div>
                              <div class="bottom_value">
                                  <div class="value_span">
                                    <span><font><i>声明价值</i><b>Declared Value：</b></font><u>________元RMB</u></span>
                                    <span>保价Insured：<u>________元RMB</u></span>
                                    <span>费用Charges：<u>________元RMB</u></span>
                                  </div>
                                  <div class="value_img"><img :src="smaImg"/></div>
                              </div>
                            </div>
                          </div>
                          <div class="facesheet_bottom_rr">
                            <div class="bottom_title">⑨付款方式/总费用Payment/TotalCharges</div>
                            <div class="mid_r_content">
                              <div><span style="padding-left:10px;"><el-checkbox label="现结 Sender Pay Cash：" name="type"></el-checkbox></span><span style="color:#fff;font-size:12px;">_______________元RMB</span></div>
                              <div><span style="display:block;padding-left:10px;"><el-checkbox label="寄件/收件人月结 Sender/Receiver Pay Monthly：" name="type"></el-checkbox></span><span style="color:#fff;font-size:12px;display:block;padding-left: 26px;">_______________元RMB</span></div>
                              <div><span style="padding-left:10px;"><el-checkbox label="第三方月结 3rd Party Pay Monthly：" name="type"></el-checkbox></span><span style="color:#fff;font-size:12px;">_______________元RMB</span></div>
                              <div><span style="color:#fff;font-size:12px;padding-left:10px;">月结账号Monthly Closing Account：</span><span style="color:#fff;font-size:12px;display:block;padding-left:10px;">_____________________________________________________</span></div>
                              <div style="margin-top:8px;"><span style="color:#fff;font-size:12px;padding-left:10px;">总费用Total Charges: </span><span style="color:#fff;font-size:12px;">_____________________________元RMB</span></div>
                            </div>
                          </div>
                        </div>
                    </div>
                  </el-tab-pane>
                </el-tabs> -->
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleClickFn">取 消</el-button>
        <el-button type="primary" @click="dialogVisiblesubmitFn">打 印</el-button>
        </span> -->
    </el-dialog>
  </div>
</template>

<script>
// import logoVImg from "@/assets/img/logo.png";
// import titleVImg from "@/assets/img/title.jpg";
// import tiaomaVImg from "@/assets/img/tiaoma.jpg";
// import smaVImg from "@/assets/img/sma.jpg";
export default {
  name: "facesheet",
  data() {
    return {
      // logo: logoVImg,
      // titleImg: titleVImg,
      // tiaomaImg:tiaomaVImg,
      // smaImg:smaVImg
    };
  },
  props: ["dialogVisible"],
  created() {},
  mounted() {},
  methods: {
    handleClose() {
      this.dialogVisible = false;
      this.$emit("dialogVisibleShow", false);
    },
    dialogVisibleClickFn() {
      this.dialogVisible = false;
      this.$emit("dialogVisibleShow", false);
    },
    dialogVisiblesubmitFn() {
      this.dialogVisible = false;
      this.$emit("dialogVisibleShow", false);
    },
  },
};
</script>
<style lang='less' scoped>
/deep/.el-dialog__body {
  padding: 5px 20px !important;
}
/deep/.el-dialog {
  margin-top: 8vh !important;
  float: right !important;
}
/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: #e69850 !important;
}
/deep/.el-checkbox__label {
  font-size: 12px !important;
  color: #fff;
}
/deep/.el-checkbox {
  margin-right: 20px !important;
}
.facesheet_all {
  width: 1160px;
  border: 1px solid #000;
  height: auto;
  overflow: hidden;
}
.facesheet_top {
  width: 100%;
  height: auto;
  overflow: hidden;
  border-bottom: 1px solid #000;
}
.facesheet_t_l {
  width: 749px;
  height: auto;
  overflow: hidden;
  float: left;
  border-right: 1px solid #000;
}
.logo_img {
  width: 108px;
  height: 88px;
  float: left;
  img {
    width: 108px;
    height: 88px;
  }
}
.logo_title {
  width: 222px;
  height: 88px;
  float: left;
  margin-left: 40px;
  margin-right: 60px;
  img {
    width: 222px;
    height: 88px;
  }
}
.logo_content {
  width: 310px;
  height: auto;
  overflow: hidden;
  float: left;
  h2 {
    width: 100%;
    font-family: "微软雅黑";
    font-size: 22px;
    margin-top: 5px;
  }
  span {
    display: block;
    width: 100%;
    margin-top: 5px;
  }
}
.facesheet_t_r {
  width: 400px;
  float: left;
  margin-left: 5px;
  margin-top: 4px;
  img {
    width: 400px;
    height: 80px;
  }
}
.facesheet_mid {
  width: 100%;
  height: auto;
  overflow: hidden;
  .facesheet_mid_l {
    width: 750px;
    height: auto;
    overflow: hidden;
    float: left;
    border-bottom: 1px solid #000;
    .facesheet_mid_l_o {
      width: 375px;
      height: auto;
      overflow: hidden;
      float: left;
      .mid_title {
        height: 25px;
        background: #e69850;
        border-bottom: 1px solid #000;
        border-right: 1px solid #000;
        line-height: 25px;
        color: #fff;
        padding-left: 10px;
      }
      .mid_list {
        padding-left: 10px;
        border-right: 1px solid #000;
        min-height: 73px;
        span {
          display: block;
          height: 25px;
          line-height: 25px;
          font-size: 12px;
        }
      }
    }
    .facesheet_mid_l_t {
      width: 375px;
      height: auto;
      overflow: hidden;
      float: left;
      .mid_title {
        height: 25px;
        background: #e69850;
        border-bottom: 1px solid #000;
        border-right: 1px solid #000;
        line-height: 25px;
        color: #fff;
        padding-left: 10px;
      }
      .mid_list {
        padding-left: 10px;
        border-right: 1px solid #000;
        span {
          display: block;
          height: 25px;
          line-height: 25px;
          font-size: 12px;
        }
      }
      .mid_list_desc {
        height: 73px;
      }
    }
  }
  .facesheet_mid_r {
    width: 410px;
    height: auto;
    overflow: hidden;
    float: left;
    .bottom_title {
      height: 25px;
      background: #e69850;
      border-bottom: 1px solid #000;
      line-height: 25px;
      color: #fff;
      padding-left: 10px;
    }
    .mid_r_content {
      min-height: 176px;
      border-bottom: 1px solid #000;
      background: #e69850;
      div {
        overflow: hidden;
        height: auto;
        span {
          display: block;
          float: left;
          color: #fff;
          font-size: 12px;
          padding-left: 10px;
        }
      }
    }
  }
}
.facesheet_bottom {
  width: 100%;
  min-height: 175px;
  overflow: hidden;
  .facesheet_bottom_l {
    width: 275px;
    min-height: 175px;
    overflow: hidden;
    float: left;
    .bottom_title {
      height: 25px;
      background: #e69850;
      border-bottom: 1px solid #000;
      border-right: 1px solid #000;
      line-height: 25px;
      color: #fff;
      padding-left: 10px;
    }
    .bottom_content {
      overflow: hidden;
      border-right: 1px solid #000;
      min-height: 150px;
      span {
        display: block;
        float: left;
        width: 100%;
        line-height: 55px;
        padding-left: 10px;
        font-size: 12px;
        i {
          display: block;
          float: left;
        }
        b {
          display: block;
          float: left;
          margin-left: 30px;
        }
        u {
          text-decoration: none;
        }
      }
    }
  }
  .facesheet_bottom_m {
    width: 275px;
    min-height: 175px;
    overflow: hidden;
    float: left;
    .bottom_title {
      height: 25px;
      background: #e69850;
      border-bottom: 1px solid #000;
      border-right: 1px solid #000;
      line-height: 25px;
      color: #fff;
      padding-left: 10px;
    }
    .bottom_content {
      overflow: hidden;
      border-right: 1px solid #000;
      min-height: 150px;
      span {
        display: block;
        float: left;
        width: 100%;
        line-height: 55px;
        padding-left: 10px;
        font-size: 12px;
        i {
          display: block;
          float: left;
        }
        b {
          display: block;
          float: left;
          margin-left: 30px;
        }
        u {
          text-decoration: none;
        }
      }
    }
  }
  .facesheet_bottom_r {
    width: 200px;
    height: auto;
    overflow: hidden;
    float: left;
    .bottom_title {
      height: 25px;
      background: #e69850;
      border-bottom: 1px solid #000;
      border-right: 1px solid #000;
      line-height: 25px;
      color: #fff;
      padding-left: 10px;
    }
    .value_span {
      height: auto;
      overflow: hidden;
      border-right: 1px solid #000;
      border-bottom: 1px solid #000;
      span {
        display: block;
        font-size: 12px;
        clear: both;
        line-height: 20px;
        font {
          float: left;
        }
        i,
        b {
          display: block;
        }
        b {
          font-weight: normal;
          margin-top: -7px;
        }
        u {
          float: right;
          text-decoration: none;
          margin-right: 5px;
        }
      }
    }
    .value_img {
      height: 76px;
      text-align: center;
      overflow: hidden;
      border-right: 1px solid #000;
      img {
        width: 68px;
        height: 68px;
      }
    }
  }
  .facesheet_bottom_ll {
    float: left;
  }
  .facesheet_bottom_rr {
    width: 410px;
    height: auto;
    overflow: hidden;
    float: left;
    .bottom_title {
      height: 25px;
      background: #e69850;
      border-bottom: 1px solid #000;
      border-right: 1px solid #000;
      line-height: 25px;
      color: #fff;
      padding-left: 10px;
    }
    .mid_r_content {
      min-height: 150px;
      background: #e69850;
    }
  }
}
</style>